<template>

  <div style="width: 70%;background-color: #f5f5f5;margin: 0 auto">
    <h1>新增新闻</h1>
    <el-form label-width="80px">
      <el-form-item label="主标题" style="width: 300px">
        <el-input v-model="newsForm.mainTitle"/>
      </el-form-item>
      <el-form-item label="副标题" style="width: 300px">
        <el-input v-model="newsForm.subTitle"/>
      </el-form-item>
      <el-form-item label="位置" style="width: 300px">
        <el-select v-model="newsForm.pos" size="default" clearable>
          <el-option v-for="item in posSelect" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="封面">
        <el-upload
            class="avatar-uploader"
            action="http://localhost:7070/api/file/uploadImage"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
          <el-icon v-else class="avatar-uploader-icon">
            <Plus/>
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="权重" style="width: 300px">
        <el-input v-model="newsForm.weight" type="number"/>
      </el-form-item>
      <el-form-item label="标签" style="width: 300px">
        <el-input v-model="newsForm.tag"/>
      </el-form-item>
      <el-form-item label-width="0px">
        <EditorHtml v-model="newsForm.content"/>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-button @click="addNews()">新增</el-button>
  </div>
</template>

<script setup>
import EditorHtml from '@/components/EditorHtml.vue'
import {reactive,ref} from 'vue'
import { ElMessage } from 'element-plus'
import {addNewsApi} from '@/apis/news.js'

const newsForm = reactive({
  mainTitle: "",
  subTitle: "",
  content: '',
  pos: '',
  weight: 1,
  tag: "头条新闻",
  img:""
})
const imageUrl = ref('')
const posSelect = [
  {
    label: "主1",
    value: "main"
  },
  {
    label: "中-文字",
    value: "center1"
  },
  {
    label: "中-带图",
    value: "center2"
  },
  {
    label: "右-带图",
    value: "right"
  },
  {
    label: "政策文件",
    value: "bottom1"
  },
  {
    label: "法律法规",
    value: "bottom2"
  },
  {
    label: "政策服务",
    value: "bottom3"
  },
  {
    label: "右下",
    value: "bottom4"
  }

]

const handleAvatarSuccess = function(response, uploadFile) {
  imageUrl.value = URL.createObjectURL(uploadFile.raw);
};

const beforeAvatarUpload = function(rawFile) {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!');
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!');
    return false;
  }
  return true;
};
const addNews = () => {
  newsForm.img=imageUrl.value
  addNewsApi(newsForm).then(res => {
    ElMessage.success("发布成功")
  })
}
</script>

<style>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
